<template>
	<div class="page-container">
		<el-card class="page-card page-h-full">
			<div class="flex">
				<!-- 左侧 -->
				<Category @getList="categorySearch" />
				<!-- 右侧 -->
				<div class="flex-1 pt-[20px] px-[36px] flex flex-col">
					<!-- 头部 -->
					<div class="flex items-center pb-[24px] header mb-[32px]">
						<span class="text-[14px] font-bold mr-[10px]">全部</span>
						<span class="text-[12px] text-[#999999] mr-[49px]">共{{ total }}张图片</span>
						<el-input v-model.trim="params.title" placeholder="请输入图片名称" suffix-icon="el-icon-search" class="h-[36px] !w-[240px] rounded-[4px]" @keyup.enter="getList"></el-input>
					</div>
					<div v-loading="loading" class="flex-1">
						<div class="grid md:grid-cols-4 2xl:grid-cols-6 gap-4">
							<div class="flex flex-col justify-center items-center w-[180px] mb-[31px]">
								<div class="add w-full h-[180px] flex justify-center items-center flex-col mb-[16px]">
									<i class="el-icon-plus cursor-pointer text-[50px] text-[#CCCCCC] mb-[12px]"></i>
									<div class="text-[14px] text-[#cccccc] cursor-pointer">大小不超过4m <i class="el-icon-question"></i></div>
								</div>
								<el-link :underline="false" type="primary" class="text-[12px] mb-[20px]">添加图片</el-link>
							</div>
							<div v-for="(item, index) in list" :key="index" class="flex flex-col justify-center items-center w-[180px] overflow-hidden mb-[31px]">
								<el-image class="rounded-[8px] w-full h-[180px] border mb-[16px]" :src="item.url"> </el-image>
								<div class="h-[16px] w-full overflow-ellipsis overflow-hidden whitespace-nowrap text-[12px] mb-[6px]">
									{{ item.name }}
								</div>
								<div class="w-full flex items-center justify-between">
									<time class="text-[12px] text-[#999999]">{{ item.createTime | time }}</time>
									<div class="flex items-center">
										<el-link :underline="false" type="primary" class="text-[12px]" @click="handleOneRemove(item.id)">删除</el-link>
										<el-link :underline="false" type="primary" class="text-[12px] mx-[2px]">|</el-link>
										<el-link :underline="false" type="primary" class="text-[12px]">更多</el-link>
									</div>
								</div>
							</div>
						</div>
					</div>
					<pagination v-show="total > 0" :total="total" :page.sync="params.pageNum" :limit.sync="params.pageSize" @pagination="getList" />
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
import dayjs from 'dayjs';
import Category from './components/category';
import { getMaterial, removeMaterial } from '@/api/mall/materialHome';
export default {
	components: {
		Category,
	},
	filters: {
		time(val) {
			return dayjs(val).format('YYYY-MM-DD');
		},
	},
	data() {
		return {
			params: {
				pageNum: 1,
				pageSize: 10,
				title: null,
			},
			total: 0,
			list: [],
			loading: false,
		};
	},
	created() {
		this.getList();
	},
	methods: {
		categorySearch(index) {
			this.params.typeId = index;
			this.getList();
		},
		getList() {
			this.loading = true;
			getMaterial(this.params)
				.then((res) => {
					setTimeout(() => {
						this.list = res.data.records;
						this.total = res.data.total;
					}, 500);
				})
				.finally(() => {
					setTimeout(() => {
						this.loading = false;
					}, 500);
				});
		},
		handleOneRemove(id) {
			this.$dialogRemove('确定删除该图片吗？').then((res) => {
				removeMaterial([id]).then((response) => {
					this.$message({
						type: 'success',
						message: '删除成功!',
					});
					setTimeout(() => {
						this.getList();
						res.hide();
						res.loading(false);
					}, 100);
				});
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.header {
	border-bottom: 1px solid #e8e8e8;
}
.add {
	border: 1px dashed #cccccc;
	border-radius: 8px;
}
.border {
	border: 1px solid #cccccc;
	padding: 2px;
	border-radius: 8px;
	::v-deep {
		img {
			border-radius: 8px;
		}
	}
}
</style>
